<!-- 周期到账弹出窗 -->
<template>
	<div>
		<el-dialog :title="state.title" v-model="state.isShowDialog"  center class="borderRadius10" width="590">
			<div class="cropper-warp">
				<el-form ref="ruleFormRef" :model="state.formData" label-width="120px">
                    <el-form-item label="使用类型：">
                        <el-checkbox-group v-model="state.formData.type" v-if="state.type == 'cardPriceUseType' || state.type == 'cardBonusPriceUseType'">
							<el-checkbox :label=0 :key=0
								:disabled="state.formData.type.includes(1) || 
								state.formData.type.includes(2)" >全部商品</el-checkbox>
							<el-checkbox :label=1 :key=1 :disabled="state.formData.type.includes(0)">商品类型</el-checkbox>
							<el-checkbox :label=2 :key=2 :disabled="state.formData.type.includes(0)">指定商品</el-checkbox>
						</el-checkbox-group>
						<el-checkbox-group v-model="state.formData.type" v-else>
							<el-checkbox :label=0 :key=0
								:disabled="state.formData.type.includes(1) || 
								state.formData.type.includes(2) || 
								state.formData.type.includes(4)" >不参与</el-checkbox>
							<el-checkbox :label=1 :key=1 :disabled="state.formData.type.includes(0)">通用商品</el-checkbox>
							<el-checkbox :label=2 :key=2 :disabled="state.formData.type.includes(0)">商品类型</el-checkbox>
							<el-checkbox :label=4 :key=4 :disabled="state.formData.type.includes(0)">指定商品</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" >取 消</el-button>
					<el-button type="primary" @click="onSubmit"  >确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { formData } from '/@/views/pages/dynamicForm/mock';
const emit = defineEmits(['useTypeListFun'])
// 定义变量内容
const state = reactive({
    loading: false,
	isShowDialog: false,
	useIndex: 0,
    title:'',
    goodsTableData:[]as Array<any>,
	type:'',
    formData:{
        type:[],
    }
});

// 打开弹窗
const openDialog = ( type: string, data?: any) => {
	state.type = type;
	state.formData.type = [];
	if(type == 'cardPriceUseType'){
		state.title = '储值卡使用类型'
	}else if(type == 'cardPriceDiscountType'){
		state.title = '储值卡折扣类型'
	}else if(type == 'cardBonusPriceUseType'){
		state.title = '储值卡赠金折扣类型'
	}else if(type == 'cardBonusPriceDiscountType'){
		state.title = '储值卡赠金折扣类型'
	}
	state.formData.type = data;
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () =>{
	emit('useTypeListFun', state.type,state.formData.type);
	closeDialog();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
</style>
